<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        html{
            /*height: 657px;*/
        }
        .layui-upload-img{
            width: 100px;
        }
        .layui-tab-content{
            position: relative;
            /*height: 570px;*/
            overflow-y:auto ;
            overflow-x: hidden;
        }
        .layui-form-item .layui-input-inline{
            width: 500px;
        }
        .uploadimgbox{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            margin-right: 15px;
            margin-bottom: 15px;
        }

        .uploadimgbox  .layui-icon{
            position: absolute;
            right: -15px;
            top: -15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-tab layui-tab-card" style="box-shadow: none">
    <div class="layui-tab-content">
        <div id="map" style="width: 600px;height: 150px;margin: 10px 0;margin-left: 110px;background: #eee;overflow: hidden;">
        </div>
        <div class="layui-tab-item layui-show">
            <form class="layui-form" id="form">
                {if $groupid}
                <input type="hidden" name="groupid" value="{$groupid}">
                {/if}

                <input id="typeid" type="hidden" name="typeid" value="{notempty name='typeid'}{$typeid}{/notempty}">

                {notempty name="$menu"}
                <input type="hidden" name="id" value="{$menu.id}">
                {/notempty}

                <div class="layui-form-item">
                    <label class="layui-form-label">POI类型</label>
                    <div class="layui-input-inline" style="width: 450px;z-index:1000;">
                        <select name="typeid" lay-filter="setType" lay-verify="required">
                            <option value="">请选择</option>
                            {volist name='classify_list' id='class_value'}
                            <option value="{$class_value['classify_id']}" {if isset($typeid) && $typeid==$class_value['classify_id']} selected{/if}>{$class_value['classify_name']}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <!--名称-->
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline" style="position: relative">
                        <input name="name" id="poiname" value="{notempty name='$menu'}{$menu.name}{/notempty}" lay-verify="required" placeholder="请输入名称获取地址" autocomplete="off" class="layui-input" type="text">
                        <div class="addressbox"></div>
                        {notempty name='$menu.lat'}<input type="hidden" name="lat" value="{$menu.lat}">{/notempty}
                        {notempty name='$menu.lng'}<input type="hidden" name="lng" value="{$menu.lng}">{/notempty}
                    </div>
                </div>

                <!--英文名-->
                <div class="layui-form-item">
                    <label class="layui-form-label">英文名</label>
                    <div class="layui-input-inline">
                        <input name="eng_name" id="eng_name" maxlength="255" value="{notempty name='$menu'}{$menu.eng_name}{/notempty}"   placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <!--门店-->
                <div class="layui-form-item show5">
                    <label class="layui-form-label">门店</label>
                    <div class="layui-input-inline" style="position: relative">
                        <input name="shop" value="{notempty name='$menu'}{$menu.shop}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <!--排序-->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input name="poi_sort" maxlength="50" style="width:150px;" value="{notempty name='$menu'}{$menu.poi_sort}{/notempty}"  placeholder="请输入" autocomplete="off" class="layui-input" type="number">
                    </div>
                </div>

                <!--地址-->
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input name="address" id="address" value="{notempty name='$menu'}{$menu.address}{/notempty}" lay-verify="required" placeholder="请输入地址" class="layui-input" type="text">

                    </div>
                </div>

                <!--中文介绍-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">中文介绍</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" id="introduce" class="layui-textarea" name="introduce">{notempty name='$menu'}{$menu.introduce}{/notempty}</textarea>
                    </div>
                </div>

                <!--英文介绍-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">英文介绍</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="eng_introduce">{notempty name='$menu'}{$menu.eng_introduce}{/notempty}</textarea>
                    </div>
                </div>

                <!--开放时间-->
                <div class="layui-form-item">
                    <label class="layui-form-label">开放时间</label>
                    <div class="layui-input-inline">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="open_time">{notempty name='$menu'}{$menu.open_time}{/notempty}</textarea>
                    </div>
                </div>

                <!--用时参考-->
                <div class="layui-form-item show2">
                    <label class="layui-form-label">用时参考</label>
                    <div class="layui-input-inline">
                        <textarea  placeholder="请输入内容" class="layui-textarea" name="use_time">{notempty name='$menu'}{$menu.use_time}{/notempty}</textarea>
                    </div>
                </div>

                <!--联系方式-->
                <div class="layui-form-item">
                    <label class="layui-form-label">联系方式</label>
                    <div class="layui-input-inline">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="mobile">{notempty name='$menu'}{$menu.mobile}{/notempty}</textarea>
                    </div>
                </div>

                <!--菜系-->
                <div class="layui-form-item show4">
                    <label class="layui-form-label">菜系</label>
                    <div class="layui-input-inline">
                        <input name="cooking" maxlength="50" value="{notempty name='$menu'}{$menu.cooking}{/notempty}"  placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <!--来源-->
                <div class="layui-form-item show1">
                    <label class="layui-form-label">来源</label>
                    <div class="layui-input-inline">
                        <input name="source" value="{notempty name='$menu'}{$menu.source}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <!--评分-->
                <div class="layui-form-item show1">
                    <label class="layui-form-label">评分</label>
                    <div class="layui-input-inline">
                        <input name="score" value="{notempty name='$menu'}{$menu.score}{/notempty}" placeholder="0~5；例：2.3" autocomplete="off" class="layui-input" type="number" min="0" max="5" step="0.1">
                    </div>
                </div>

                <!--酒店星级-->
                <div class="layui-form-item layui-form-text show3">
                    <label class="layui-form-label">星级</label>
                    <div class="layui-input-inline">
                        <select name="grade">
                            <option value="" {notempty name='$menu'}{if empty($menu.grade)}selected{/if}{/notempty}></option>
                            <option value="1" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='1'}selected{/if}{/notempty}>一星</option>
                            <option value="2" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='2'}selected{/if}{/notempty}>二星</option>
                            <option value="3" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='3'}selected{/if}{/notempty}>三星</option>
                            <option value="4" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='4'}selected{/if}{/notempty}>四星</option>
                            <option value="5" {notempty name='$menu'}{if !empty($menu.grade)&&$menu.star=='5'}selected{/if}{/notempty}>五星</option>
                        </select>
                    </div>
                </div>

                <!--特别说明-->
                <div class="layui-form-item">
                    <label class="layui-form-label">特别说明</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="主要填写目的地当季的时效性动态（节日、活动等）" class="layui-textarea" name="description">{notempty name='$menu'}{$menu.description}{/notempty}</textarea>
                    </div>
                </div>

                <!--酒店参数-->
                <div id="hotel_div" {if !empty($menu.typeid) && $menu.typeid!==5}style="display:none;"{/if}>
                    <div class="layui-form-item">
                        <label class="layui-form-label">早餐</label>
                        <div class="layui-input-block" style="max-width:500px;">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="breakfast_fee">{notempty name='$menu.breakfast_fee'}{$menu.breakfast_fee}{/notempty}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">加人费</label>
                        <div class="layui-input-block" style="max-width:500px;">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="charging_fee">{notempty name='$menu.charging_fee'}{$menu.charging_fee}{/notempty}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">服务费</label>
                        <div class="layui-input-block" style="max-width:500px;">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="service_fee">{notempty name='$menu.service_fee'}{$menu.service_fee}{/notempty}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">入住时间</label>
                        <div class="layui-input-inline">
                            <input name="checkin_time" value="{notempty name='$menu.checkin_time'}{$menu.checkin_time}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                        </div>
                    </div>
                </div>


                <!--图片上传-->
                <div class="layui-form-item" style="margin:0 110px">
                    <div class="layui-upload" >
                        <button type="button" class="layui-btn" id="upload">图片上传（格式：jpg,png,gif,jpeg）</button>
                        {include file='public/uploadfiletips'}
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="seeupload">
                                {notempty name="$menu.thumb"}
                                {if $thumb=array_filter(explode(',',$menu.thumb))}
                                {volist name="$thumb" id="vo"}
                                {if !empty($vo)}
                                <span class="uploadimgbox"><img class="layui-upload-img" src="{$vo}"><i class="layui-icon">&#x1006;</i></span>
                                {/if}
                                {/volist}
                                {/if}
                                {/notempty}
                            </div>
                        </blockquote>
                    </div>
                    <input id="upload-thumb" type="hidden" name="thumb" value="{notempty name='$menu'}{$menu['thumb']}{/notempty}">
                </div>

                <!--提交-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn" lay-submit lay-filter="form">立即提交</a>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script src="{$Think.config.amap_url}"></script>
<script>
    layui.use(['layer', 'form','upload'], function(){
        var upload = layui.upload,
            layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        //执行实例
        upload.render({
            elem: '#upload'
            ,url: "{:url('common/upload')}"
            ,multiple: true
            ,accept:"images"
            ,size:"50000"
            , before: function (obj) {
                layer.load(2);
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    EXIF.getData(file, function() {
                        //获取图片Orientation
                        orient = EXIF.getTag(this, 'Orientation');
                        if(orient==6){
                            //逆时针旋转了90度
                            rotateBase64Img(result,90,callback);
                        }else if(orient==1){
                            $('#demo1').attr('src', result); //图片链接（base64）
                        }
                    });

                });
            }
            ,done: function(res){
                //上传完毕回调
                layer.closeAll('loading');
                if(res.code == 2) {
                    $('#seeupload').append('<span class="uploadimgbox"><img class="layui-upload-img" src="'+res.src+'"><i class="layui-icon">&#x1006;</i></span>');
                    $('#upload-thumb').val($('#upload-thumb').val()+","+res.src);
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                layer.closeAll('loading');
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //通过选择城市跳转到不同城市
        form.on('select()',function(){

        })
        //表单提交
        form.on('submit(form)', function(data) {
            var add_load_index = layer.load(2,{shade: [0.5, '#393D49']});
            //检查必要数据
            var lat = $('input[name=lat]').val();
            var lng = $('input[name=lng]').val();
            if(lat=='' || lng=='' || lat==undefined || lng==undefined){
                layer.msg('请填写地址并选择');
                layer.close(add_load_index);
                return false;
            }
            $.ajax({
                url:"{:url('admin/poi/addnewpoibyamap')}",
                data:$('#form').serialize(),
                type:'post',
                async: false,
                success:function(res) {
                    layer.close(add_load_index);
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },1500)
                    }
                }
            });
            return false;
        });

        //取消地址列表框
        $('body').click(function(e) {
            if(!$(e.target).hasClass('geoaddress')){
                hiddenAddressBox();
            }
        })

        //清掉地址列表
        function hiddenAddressBox()
        {
            $(".addressbox").html("");
        }
    });

    $("#seeupload").on("click",".layui-icon",function(){
        $(this).parent().remove();
        thumb("seeupload");
    });

    function thumb(obj){
        var thumbs="";
        $("#"+obj).find("img").each(function(){
            var url=$(this).attr("src");
            thumbs+=","+url;
        });
        $("#upload-thumb").val(thumbs);
    }
</script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(window).on('load', function() {
            form.on('select(setType)',function(data){
                var typeid = data.value;
                setShow(typeid);
            });

            function setShow(typeid){
                if(typeid=='1' || typeid=='6'){
                    $(".show1").show();
                    $(".show2,.show3,.show4,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='2' || typeid=='3' || typeid=='4'){
                    $(".show1,.show2").show();
                    $(".show3,.show4,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='5'){
                    //酒店
                    $(".show1,.show3").show();
                    $(".show2,.show4,.show5").hide();
                    $("#hotel_div").show();
                }else if(typeid=='11'){
                    //美食
                    $(".show1,.show4").show();
                    $(".show2,.show3,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='12'){
                    $(".show1,.show2,.show3,.show4,.show5").hide();
                    $("#hotel_div").hide();
                }else if(typeid=='13' || typeid=='14' || typeid=='15'){
                    $(".show5").show();
                    $(".show1,.show2,.show3,.show4").hide();
                    $("#hotel_div").hide();
                }
                return false;
            }

            var typeid = $("#typeid").attr("value");
            if(typeid!==undefined && typeid>0){
                setShow(typeid);
            }else{
                setShow(1);
            }

        });
    });
</script>
<script>
    //页面加载完成加载
    window.onload = function(){
        try {
            //初始化 天安门广场
            var map = new AMap.Map('map', {
                center:[116.397451,39.909187],
                zoom:13
            });
        }catch (e) {
            layer.msg('高德地图加载失败');
            return false;
        }
        //标记地图的点
        function marker(lat,lng,title='')
        {
            map.clearMap();
            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
                position: new AMap.LngLat(lng,lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: title
            });
            // 传入经纬度，设置地图中心点
            var position = new AMap.LngLat(lng,lat);  // 标准写法
            // 简写 var position = [116, 39];
            map.setCenter(position);
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
        }
        //绑定匹配地址点击事件
        $(document).on('click','.geoaddress',function(){
            getGeoAddressInfo(this);
        })
        //匹配地址点击获取地址信息
        function getGeoAddressInfo(that)
        {
            var location = $(that).attr('data-location');
            var location_arr = location.split(',');
            //获取GEO地图信息
            AMap.WebService.get('https://restapi.amap.com/v3/geocode/regeo',{
                location : location
            },function (error, result) {
                //添加经纬度 location gid map_thumb_img
                var formatted_address = result.regeocode.formatted_address;
                var lat = location_arr[1];
                var lng = location_arr[0];
                var html = '';
                html += '<input type="hidden" name="lat" value="'+lat+'">';
                html += '<input type="hidden" name="lng" value="'+lng+'">';
                html += '<input type="hidden" name="address" value="'+formatted_address+'">';
                html += '<input type="hidden" name="use_map" value="amap">';
                $('input[name=address]').val(formatted_address);
                $(that).parent().parent().append(html);
                $(that).parent().children().remove();
                //标记marker
                marker(lat,lng);
            })
        }
        //延迟加载输入
        var timeoutId = 0;
        //通过输入内容匹配地址
        $(document).on('input','input[name=name]',function (res) {
            clearTimeout(timeoutId);
            var value = $(this).val();
            timeoutId = setTimeout(function(){
                getAddressList(value,$('.addressbox'));
            },1000)
        });

        //通过输入内容匹配地址
        function getAddressList(keyword,addressbox)
        {
            //匹配地址信息
            AMap.WebService.get('https://restapi.amap.com/v3/place/text',{
                keywords : keyword
            },function (error, result) {
                if(result.count < 1 || result.info!='OK'){
                    return false;
                }
                //获取数组进行渲染
                var html = '';
                var num = 0;
                $.each(result.pois,function (i,v) {
                    if(num<10){
                        if(v.name!=''){
                            html += '<span class="geoaddress" data-location="'+v.location+'">'+v.name+'</span>';
                            num ++;
                        }
                    }else{
                        return false;
                    }
                })
                addressbox.children().remove();
                addressbox.append(html);
            })

        }

        //初始化地图
        {if !empty($menu.lng) && !empty($menu.lat)}
        marker({$menu.lat},{$menu.lng});
        {/if}
    }
</script>

</body>
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    //    var ue = UE.getEditor('introduce');
</script>
</html>